<template>
  <div class="airspaceApplication">
    <div class="container">
      <div class="up-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true">
          <el-form-item :label="$t('institutional.name')">
            <el-input
              v-model="queryParams.institutionName"
              :placeholder="$t('institutional.EnterName')"
              maxlength="50"
              clearable
            />
          </el-form-item>
          <el-form-item :label="$t('institutional.type')">
            <el-select
              class="selectAirSpace"
              v-model="queryParams.institutionType"
              :placeholder="$t('institutional.EnterType')"
              clearable
            >
              <el-option
                v-for="dict in institutionTypeList"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('institutional.legalPersonName')"
            label-width="80"
          >
            <el-input
              v-model="queryParams.legalName"
              maxlength="20"
              :placeholder="$t('institutional.EnterLegalPersonName')"
              clearable
            />
          </el-form-item>
          <el-form-item :label="$t('institutional.RegisterNumber')">
            <el-input
              v-model="queryParams.registerMobile"
              maxlength="11"
              :placeholder="$t('institutional.EnterRegisterNumber')"
              clearable
            />
          </el-form-item>
          <el-form-item :label="$t('institutional.RegisterEmail')">
            <el-input
              v-model="queryParams.registerEmail"
              maxlength="50"
              :placeholder="$t('institutional.EnterRegisterEmail')"
              clearable
            />
          </el-form-item>
          <el-form-item :label="$t('institutional.certificationStatus')">
            <el-select
              class="selectAirSpace"
              v-model="queryParams.authenticationStatus"
              :placeholder="$t('institutional.enterCertificationStatus')"
              clearable
            >
              <el-option
                v-for="dict in authenticationStatusList"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="注册人姓名">
            <el-input
              v-model="queryParams.registerName"
              maxlength="20"
              placeholder="请输入注册人姓名"
              clearable
            />
          </el-form-item>
          <div class="buttonStyle">
            <el-button
              class="searchButton"
              type="primary"
              icon="Search"
              @click="handleQuery"
              >{{ $t("institutional.search") }}</el-button
            >
            <el-button
              class="refreshButton"
              icon="Refresh"
              @click="resetQuery"
              >{{ $t("institutional.reset") }}</el-button
            >
          </div>
        </el-form>
      </div>
      <div class="down-container">
        <el-table
          :data="tableData"
          :header-cell-style="headClass"
          stripe
          :border="true"
          max-height="60vh"
          style="width: 100%"
        >
          <el-table-column
            :label="$t('institutional.no')"
            type="index"
            :index="indexMethod"
            width="85"
            align="center"
          />
          <el-table-column
            :label="$t('institutional.operate')"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-button
                link
                type="primary"
                @click="handleDetail(scope.row)"
                v-hasPermi="['airspace:airspaceSetup:detail']"
                >{{ $t("institutional.detail") }}</el-button
              >
              <el-button
                v-if="scope.row.authenticationStatus === '待审核'"
                link
                type="primary"
                @click="handleExamine(scope.row)"
                v-hasPermi="['airspace:airspaceSetup:detail']"
                >{{ $t("institutional.toExamine") }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('institutional.InstitutionName')"
            prop="institutionName"
            width="110"
            :show-overflow-tooltip="true"
            align="center"
          />
          <el-table-column
            :label="$t('institutional.OrganizationType')"
            prop="institutionType"
            width="110"
            :show-overflow-tooltip="true"
            align="center"
          >
            <template #default="{ row }">
              <span v-if="row.status === 0">{{
                $t("institutional.governmentOrgans")
              }}</span>
              <span v-if="row.status === 1">{{
                $t("institutional.PublicInstitutions")
              }}</span>
              <span v-if="row.status === 2">{{
                $t("institutional.enterprise")
              }}</span>
              <span v-if="row.status === 3">{{
                $t("institutional.socialOrganization")
              }}</span>
              <span v-if="row.status === 4">{{
                $t("institutional.otherOrganizational")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('institutional.code')"
            prop="unifiedSocialCreditCode"
            width="180"
            :show-overflow-tooltip="true"
            align="center"
          />
          <el-table-column
            :label="$t('institutional.legalName')"
            prop="legalName"
            width="180"
            align="center"
          />
          <el-table-column
            :label="$t('institutional.registerName')"
            prop="registerName"
            width="180"
            align="center"
          />
          <el-table-column
            :label="$t('institutional.registerMobile')"
            prop="registerMobile"
            align="center"
          />
          <el-table-column
            :label="$t('institutional.registerEmail')"
            prop="registerEmail"
            width="180"
            :show-overflow-tooltip="true"
            align="center"
          />
          <el-table-column
            :label="$t('institutional.registerAddress')"
            prop="registerAddress"
            width="180"
            :show-overflow-tooltip="true"
            align="center"
          />
          <el-table-column
            :label="$t('institutional.authenticationStatus')"
            prop="authenticationStatus"
            width="110"
            align="center"
          />
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryCurrent.pageNum"
          v-model:limit="queryCurrent.pageSize"
          @pagination="getList"
          class="pagination"
        />
      </div>
    </div>
  </div>
</template>
<script setup name="institutional">
import { onMounted, reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
import { getDicts } from "@/api/system/dict/data";
import { getInstitutionList } from "@/api/dataManagement/institutional";
const router = useRouter();
const total = ref(0);
const institutionTypeList = ref([]); //机构类型
const authenticationStatusList = ref([]); //认证的状态
const tableData = ref([]);
const data = reactive({
  queryCurrent: {
    pageNum: 1,
    pageSize: 10,
  },
  queryParams: {
    institutionName: "",
    institutionType: "",
    legalName: "",
    registerName: "",
    registerMobile: "",
    registerEmail: "",
    authenticationStatus: "",
  },
});
const { queryCurrent, queryParams } = toRefs(data);

function indexMethod(index) {
  // 当前页码
  const currentPage = queryCurrent.value.pageNum;
  // 每页显示的数据条数
  const pageSize = queryCurrent.value.pageSize;
  // 上一页最后一个编号
  const prevLastIndex = (currentPage - 1) * pageSize;
  // 当前行的实际索引
  const truelndex = index + prevLastIndex;
  // 如果当前行的索引大于等于当前页的最大索引，
  // 则使用当前行的实际索引，否则使用当前行的原始索引
  return truelndex >= currentPage * pageSize
    ? truelndex
    : index + prevLastIndex + 1;
}

async function dictionary() {
  await getDicts("institutional_type").then((res) => {
    if (res.code === 200) {
      institutionTypeList.value = res.data;
      institutionTypeList.value.unshift({ dictLabel: "全部", dictValue: "" });
    }
  });

  await getDicts("authentication_status").then((res) => {
    if (res.code === 200) {
      authenticationStatusList.value = res.data;
      authenticationStatusList.value.unshift({
        dictLabel: "全部",
        dictValue: "",
      });
    }
  });
}

function getList() {
  console.log(queryCurrent, queryParams);
  getInstitutionList(queryCurrent.value, queryParams.value).then((res) => {
    if (res.code === 200) {
      tableData.value = res.rows;
      total.value = res.total;
    }
  });
}

function handleQuery() {
  getList();
}

function resetQuery() {
  queryParams.value = {
    institutionName: "",
    institutionType: "",
    legalName: "",
    registerMobile: "",
    registerEmail: "",
    authenticationStatus: "",
  };
  getList();
}

// 详情
function handleDetail(val) {
  console.log(val);
  router.push({
    name: "InstitutionalDetail",
    query: { institutionId: val.institutionId, toExamine: "detail" },
  });
}

// 审核
function handleExamine(val) {
  router.push({
    name: "InstitutionalDetail",
    query: { institutionId: val.institutionId, toExamine: "audit" },
  });
}

function headClass({ row, rowIndex }) {
  if (rowIndex === 0) {
    return {
      background: "#F4F4F4",
      color: "#333333",
      fontSize: "16px",
      fontWeight: "400",
    };
  }
}

onMounted(() => {
  dictionary();
  getList();
});
</script>
<style lang="scss" scoped>
.airspaceApplication {
  width: 100%;
  height: 100%;

  .container {
    position: relative;
    width: calc(100% - 40px);
    height: 92%;
    margin: 0 20px 20px;
    border-radius: 10px;
    background: white;

    .pagination {
      position: absolute;
      left: 50%;
      bottom: 30px;
      transform: translateX(-50%);
    }

    .up-container {
      padding: 30px 20px 30px;
      width: 100%;
      height: 140px;
      border-radius: 10px;
      background-color: #ffffff;

      :deep .el-form .el-form-item__label {
        font-weight: 400;
        font-size: 14px;
        color: #666666;
      }

      .buttonStyle {
        position: absolute;
        right: 0px;
        top: -45px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 200px;
        height: 40px;
      }

      .searchButton {
        width: 90px;
        height: 34px;
        border-radius: 4px;
        color: #ffffff;
        background-color: #2bc17b;
        font-size: 14px;
        margin: 0;
      }

      .refreshButton {
        width: 90px;
        height: 34px;
        border-radius: 4px;
        color: #ffffff;
        font-size: 14px;
        background: #ffb700;
        margin: 0;
      }

      :deep .el-form--inline .el-form-item {
        display: inline-flex;
        vertical-align: middle;
        margin-right: 40px;
        margin-bottom: 19px;
      }

      :deep .el-form-item__content {
        width: auto;
        height: 36px;
        border-radius: 4px;
        background: rgb(255, 255, 255);
        border: 1px solid rgb(220, 223, 230);
      }

      :deep .el-input__wrapper {
        box-shadow: none;
        height: 34px;
        width: 100% !important;
      }

      :deep .el-input {
        width: 270px;
        height: 34px;
      }

      :deep .el-select {
        width: 270px;
        height: 34px;

        :deep .el-input {
          height: 34px;
        }
      }
    }

    .down-container {
      margin: 10px 0 0;
      background-color: #ffffff;
      border-radius: 4px;
      height: 77%;

      .tag {
        display: inline-block;
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 15px;
        color: rgba(153, 153, 153, 1);
        border: 1px solid rgba(153, 153, 153, 1);
      }
      .tag.warning {
        color: rgba(255, 149, 18, 1);
        border: 1px solid rgba(255, 149, 18, 1);
      }
      .tag.success {
        color: rgba(43, 193, 123, 1);
        border: 1px solid rgba(43, 193, 123, 1);
      }
    }
    :deep .el-table__footer-wrapper,
    .el-table__header-wrapper {
      background-color: #f4f4f4;
      height: 56px;
    }

    :deep .el-table__header {
      height: 100%;
      background-color: #f4f4f4;
    }

    :deep .el-table .el-table__cell {
      text-align: center;
    }

    :deep .el-table__row {
      height: 50px;
    }

    :deep .el-dialog:not(.is-fullscreen) {
      margin-top: 36vh !important;
    }
    :deep .el-dialog__body {
      text-align: center;
      display: flex;
      justify-content: center;
      padding: 0px calc(var(--el-dialog-padding-primary) + 5px) 20px !important;
    }
    :deep .el-dialog__footer {
      padding-top: 0;
    }
  }
}
</style>
